<template>
  <view class="sign-box">
    <view class="sign-info" @click="handleInfo">
      <uv-avatar :src="webSrc(userInfo?.avatar)" size="106rpx" />
      <view class="sign-center">
        <view class="operator">{{ userInfo?.nickName }}</view>
        <view class="post-tag">{{ enumUserType(userInfo?.userType) }}</view>
      </view>
      <uv-icon
        name="arrow-right"
        color="#757575"
        :label="timeFormat(Number(new Date()))"
        label-pos="left"
        label-color="#757575"
      />
    </view>
    <g-month-calendar
      mode="month"
      :more="false"
      :dotList="dotList"
      @selected-change="changeDate"
      @days-change="daysChange"
    >
      <view class="sign-date">
        <uv-icon
          :name="iconClock"
          size="28rpx"
          space="10rpx"
          :label="`今天打卡${total}次`"
          label-size="28rpx"
          label-color="#212121"
        />
        <uv-steps
          v-if="dataList.length > 0"
          dot
          :current="dataList.length - 1"
          active-color="#4EA770"
          inactive-color="#DEDEDE"
          direction="column"
          :custom-style="{
            padding: '30rpx',
          }"
        >
          <uv-steps-item
            v-for="(item, index) in dataList"
            :key="index"
            :title="item.type == 1 ? '开始卡' : '结束卡'"
          >
            <template #desc>
              <view class="clock-in-desc" @click="handleRecord(item)">
                <uv-text
                  v-if="item.createTime"
                  :text="`打卡时间：${timeFormat(
                    Number(new Date(item.createTime)),
                    'hh:MM:ss'
                  )}`"
                  color="#757575"
                  prefixIcon="clock"
                  icon-style="font-size: 28rpx; color: #757575; margin-right: 20rpx"
                  size="28rpx"
                />
                <uv-text
                  v-if="item.address"
                  :text="item.address"
                  color="#757575"
                  prefixIcon="map"
                  icon-style="font-size: 28rpx; color: #757575; margin-right: 20rpx"
                  size="28rpx"
                  margin="0 0 30rpx 0"
                />
              </view>
            </template>
          </uv-steps-item>
        </uv-steps>
        <uv-load-more
          v-if="dataList.length < total && dataList.length != 0"
          :status="status"
          line
        />
        <uv-empty v-if="dataList.length == 0" :icon="empty" text="没有打卡记录" />
      </view>
    </g-month-calendar>
  </view>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { onReachBottom } from "@dcloudio/uni-app";
import { webSrc, enumUserType, timeFormat } from "@/common/mothed.js";
import { getClockInMarkList, getClockInList } from "@/request/home.js";
import iconClock from "@/static/sign/icon_clock.png";
import empty from "@/static/empty.png";

const beginTime = ref(); // 本周开始时间
const endTime = ref(); // 本周结束时间
const dotList = ref([]); // 打卡记录日期
const queryParams = ref({
  time: timeFormat(Number(new Date())), // 当前日期
  pageNum: 1, // 当前页码
  pageSize: 3, // 每页条数
});
const total = ref(0); // 总条数
const dataList = ref([]); // 数据列表
const status = ref("loadmore"); // 加载状态

// 用户信息
const userInfo = computed(() => {
  const form = uni.getStorageSync("userInfo");
  return form ? form : {};
});

onMounted(() => {
  getList();
});

onReachBottom(() => {
  if (total.value > dataList.value.length) {
    queryParams.value.pageNum += 1;
    getList();
  }
});

// 获取打卡记录
const getList = () => {
  status.value = "loading";
  getClockInList(queryParams.value)
    .then((res) => {
      if (res.code == 200) {
        dataList.value =
          queryParams.value.pageNum == 1 ? res.rows : dataList.value.concat(res.rows);
        total.value = res.total;
      }
    })
    .finally(() => {
      // emit("onRefresh", false);
      uni.stopPullDownRefresh();
      status.value = total.value == dataList.value.length ? "nomore" : "loadmore";
    });
};

// 获取点标记列表
const getMarks = () => {
  getClockInMarkList({
    beginTime: beginTime.value,
    endTime: endTime.value,
  }).then((res) => {
    dotList.value = res.data;
  });
};

// 选择日期
const changeDate = (date) => {
  queryParams.value.time = date;
  queryParams.value.pageNum = 1;
  getList();
};

// 日期范围
const daysChange = (date) => {
  beginTime.value = timeFormat(Number(date.start));
  endTime.value = timeFormat(Number(date.end));
  getMarks();
};

// 跳转个人信息页面
const handleInfo = () => {
  uni.navigateTo({ url: "/pages/user/myInfo" });
};

// 查看打卡记录
const handleRecord = (item) => {
  uni.openLocation({
    latitude: item.latitude,
    longitude: item.longitude,
  });
};
</script>
<style lang="scss" scoped>
.sign-box {
  padding: 20rpx 40rpx;
  .sign-info {
    padding: 40rpx 22rpx;
    background: #fff;
    box-shadow: 0 0 20rpx 2rpx rgba(33, 33, 33, 0.16);
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;
    &:active {
      background: #fafafa;
    }
    .sign-center {
      flex: 1;
      width: 300rpx;
      margin-left: 22rpx;
      .operator {
        font-size: 36rpx;
        color: #212121;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .post-tag {
        min-width: 130rpx;
        font-size: 24rpx;
        color: #757575;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .sign-date {
    margin: 0 30rpx;
    padding: 30rpx 0;
    background: #ffffff;
    border-top: 2rpx solid #dedede;
    .clock-in-desc {
      padding: 30rpx 0;
    }
  }
}
</style>
